<template>
  <template v-if="inited">
    <!--    {{widgetConfig.enums}}-->
<!--    {{state.value}}-->
    <div>
      <h3 style="margin: 0">监测</h3>
      <div class="a-space-mb-20"
           v-for="(event, eventIndex) in state.value.events"
          :key="event.UUID"
      >
        <z-cell-item label="监视字段" label-width="60px" style="align-items: flex-start">
<!--          <ew-suggest v-model="state.value.events[eventIndex].type"-->
<!--                      @value:change="onChange"-->
<!--                      :suggest="typeSuggest"></ew-suggest>-->
          <cus-insert-v2
              con-class="cus-data-source__insert"
              v-model="state.value.events[eventIndex].field"
              :before-modal-opened="beforeInsertV2ModalOpenedField"
              @modalClosed="onChangeV2Insert"
          ></cus-insert-v2>

        </z-cell-item>
        <z-cell-item label="监视修饰" label-width="60px">
          <ew-suggest v-model="state.value.type"
                      @value:change="onChange"
                      :suggest="modifySuggest"></ew-suggest>
        </z-cell-item>
        <z-cell-item label="动作" label-width="60px" style="align-items: flex-start">
<!--          <el-input v-model="state.value.events[eventIndex].action"-->
<!--                    type="textarea"-->
<!--                    clearable-->
<!--                    @change="onChange"></el-input>-->
          <cus-insert-v2
              con-class="cus-data-source__insert"
              v-model="state.value.events[eventIndex].action"
              :before-modal-opened="beforeInsertV2ModalOpened"
              @modalClosed="onChangeV2Insert"
          ></cus-insert-v2>

        </z-cell-item>
        <el-popconfirm title="Are you sure to delete this?"
                       @confirm="removeEvent(event.UUID, event)"
        >
          <template #reference>
            <el-button type="danger" size="small" >删除</el-button>
          </template>
        </el-popconfirm>

      </div>
      <div>
        <el-button size="small" @click="addEvent">添加</el-button>
      </div>
    </div>


  </template>

</template>

<script>
import {CustomRenderControlMixin, defineCustomRender} from "@/plugins/form-render/utils/index.js";
import EwSuggest from "@/components/Ew/EwSuggest.vue";
import {inject} from "vue";



export default {
  name: 'CusComWatches',
  components: {EwSuggest},
  mixins: [
    CustomRenderControlMixin
  ],
  setup(props, ctx) {

    // let {part_key} = props.defs;

    let ZDragxmlInstance = inject('ZDragxmlInstance')

    let obj;
    let JSON5 = ZY.JSON5;
    let { data, methods, listeners, init, widgetConfig2 } = defineCustomRender(props, ctx, {
      handleValueInit(newVal) {
        if (!newVal) {
          newVal = {
            events: []
          }
        }
        if (newVal) {
          // console.log('newVal', newVal, typeof  newVal)
          try {
            obj = JSON5.parse(newVal)
            return obj
          } catch (e) {
            // console.log(e)
          }
        }
        return {}
      }
    })
    let state = data({
      value: {}
    })
    init(props)

    function onChange() {
      let str =JSON5.stringify(state.value)
      methods.onChange(str)
    }

    let typeSuggest = [
      'click', 'change',
    ].map(v => {
      return {
        label: v,
        value: v
      }
    })

    let modifySuggest = [
        ['及时监听', 'immediate']
    ].map(v => {
      return {
        label: v[0],
        value: v[1],
      }
    })

    function addEvent() {
      if(!Array.isArray(state.value.events)) {
        state.value.events = []
      }
      state.value.events.push({
        UUID: ZY.rid(),
        type: '',
        action: '{}'
      })
    }

    function removeEvent(UUID) {
      let index = state.value.events.findIndex(v => {
        return v.UUID === UUID
      })
      if (index > -1) {
        state.value.events.splice(index, 1)
      }
    }

    function beforeInsertV2ModalOpenedField({toolState, funTools}) {
      let insVars = ZDragxmlInstance.getInsVarsV2()
      toolState.insertedVarsV2 = [].concat(
          insVars
      )
    }


    function beforeInsertV2ModalOpened({toolState, funTools}) {
      let insVars = ZDragxmlInstance.getInsVars()
      toolState.insertedVars = [].concat(
          insVars
      )
      // console.log(funTools)
      funTools.setFuns([
        {
          label: '动作函数',
          children: [
            {
              label: 'RELOAD_SOURSE',
              value: 'RELOAD_SOURSE',
              notice: `RELOAD_SOURSE():重新请求下拉数据。
示例:
RELOAD_SOURSE()  重新请求下拉数据
            `
            },

          ],
        }
      ], {
        useLib: false
      })
    }

    function onChangeV2Insert() {
      onChange()
    }


    return {
      state,
      widgetConfig: widgetConfig2,
      onChange,
      removeEvent,
      methods,
      beforeInsertV2ModalOpenedField,
      beforeInsertV2ModalOpened,
      onChangeV2Insert,
      modifySuggest,
      typeSuggest,
      addEvent,
      listeners,
    }
  },
}
</script>

